<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟vue监视data中的数据(对象类型)</title>
</head>
<body>
<script>
    let data = {
        name: 'cty',
        lookLike: '彭于晏'
    };

    //实例化一个oberver对象 检测对象版
    const obj = new Observer(data);
    vm._data = data = obj;

    //创建一个观察者 这个才是真正监视 vue数据的工作者 (vue实际 会解决对象中嵌套对象的问题 这里就不解决了 因为不会)
    function Observer(obj) {
        const keys = Object.keys(obj);
        keys.forEach(key => {
            Object.defineProperties(this,k,{
                get() {
                    return obj[k];
                },
                set(val) {
                    obj[k] = val;
                    //数据改变 => 重构模板 =>虚拟dom diff 算法 => 渲染页面
                }
            })
        })
    }
</script>
</body>
</html>